<template>
  <div class="contact-page">
    <!-- 返回按钮 -->
    <button class="back-button" @click="goBack">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <line x1="19" y1="12" x2="5" y2="12"></line>
        <polyline points="12 19 5 12 12 5"></polyline>
      </svg>
      返回
    </button>

    <div class="contact-container">
      <!-- 联系信息部分 -->
      <div class="contact-info">
        <div class="section-header">
          <h1>联系我们</h1>
          <p class="subtitle">我们随时准备为您提供帮助</p>
        </div>

        <div class="contact-methods">
          <div class="contact-card">
            <div class="contact-icon">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
                <polyline points="22,6 12,13 2,6"></polyline>
              </svg>
            </div>
            <h3>电子邮件</h3>
            <p>support@luoyetools.com</p>
            <a href="mailto:support@luoyetools.com" class="contact-link">发送邮件</a>
          </div>

          <div class="contact-card">
            <div class="contact-icon">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path>
              </svg>
            </div>
            <h3>客服电话</h3>
            <p>123-456-8888</p>
            <a href="tel:1234568888" class="contact-link">拨打电话</a>
          </div>

          <div class="contact-card">
            <div class="contact-icon">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
                <circle cx="12" cy="10" r="3"></circle>
              </svg>
            </div>
            <h3>公司地址</h3>
            <p>科技园区</p>
            <p>88号</p>
            <a href="https://map.baidu.com/" target="_blank" class="contact-link">查看地图</a>
          </div>
        </div>
      </div>

      <!-- 联系表单部分 -->
      <div class="contact-form">
        <h2>发送消息</h2>
        <form @submit.prevent="submitForm">
          <div class="form-group">
            <label for="name">姓名</label>
            <input type="text" id="name" v-model="form.name" required placeholder="请输入您的姓名">
          </div>
          
          <div class="form-group">
            <label for="email">电子邮箱</label>
            <input type="email" id="email" v-model="form.email" required placeholder="请输入您的邮箱">
          </div>
          
          <div class="form-group">
            <label for="subject">主题</label>
            <input type="text" id="subject" v-model="form.subject" required placeholder="请输入主题">
          </div>
          
          <div class="form-group">
            <label for="message">消息内容</label>
            <textarea id="message" v-model="form.message" required rows="5" placeholder="请输入您的消息内容"></textarea>
          </div>
          
          <button type="submit" class="submit-btn">发送消息</button>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Contact',
  data() {
    return {
      form: {
        name: '',
        email: '',
        subject: '',
        message: ''
      }
    }
  },
  methods: {
    goBack() {
      this.$router.go(-1)
    },
    submitForm() {
      // 这里可以添加表单提交逻辑
      alert('感谢您的留言，我们会尽快回复您！');
      this.form = {
        name: '',
        email: '',
        subject: '',
        message: ''
      }
    }
  }
}
</script>

<style scoped>
.contact-page {
  font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  background-color: #f8f9fa;
  min-height: 100vh;
  padding: 20px;
  color: #333;
}

/* 返回按钮样式 */
.back-button {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  color: #2d66b1;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  padding: 10px 15px;
  border-radius: 8px;
  transition: all 0.3s ease;
  margin-bottom: 20px;
}

.back-button:hover {
  background-color: rgba(45, 102, 177, 0.1);
  transform: translateX(-3px);
}

.back-button svg {
  width: 18px;
  height: 18px;
}

/* 联系容器 */
.contact-container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

/* 联系信息部分 */
.section-header {
  margin-bottom: 40px;
}

.section-header h1 {
  font-size: 2.5rem;
  font-weight: 700;
  color: #2d3748;
  margin-bottom: 10px;
}

.section-header .subtitle {
  font-size: 1.2rem;
  color: #666;
}

.contact-methods {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.contact-card {
  background: white;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.contact-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.contact-icon {
  width: 50px;
  height: 50px;
  background: rgba(45, 102, 177, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.contact-icon svg {
  width: 24px;
  height: 24px;
  color: #2d66b1;
}

.contact-card h3 {
  font-size: 1.3rem;
  margin-bottom: 10px;
  color: #2d3748;
}

.contact-card p {
  line-height: 1.6;
  color: #555;
  margin-bottom: 15px;
}

.contact-link {
  display: inline-block;
  color: #2d66b1;
  font-weight: 500;
  text-decoration: none;
  padding: 8px 15px;
  border: 1px solid #2d66b1;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.contact-link:hover {
  background-color: #2d66b1;
  color: white;
}

/* 联系表单部分 */
.contact-form {
  background: white;
  border-radius: 12px;
  padding: 40px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}

.contact-form h2 {
  font-size: 1.8rem;
  margin-bottom: 30px;
  color: #2d3748;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: #444;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 1rem;
  transition: border-color 0.3s ease;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #2d66b1;
}

.form-group textarea {
  resize: vertical;
}

.submit-btn {
  background: linear-gradient(135deg, #2d66b1 0%, #3a7bd5 100%);
  color: white;
  border: none;
  padding: 12px 30px;
  font-size: 1rem;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  width: 100%;
  font-weight: 500;
}

.submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(45, 102, 177, 0.3);
}

/* 响应式设计 */
@media (max-width: 992px) {
  .contact-container {
    grid-template-columns: 1fr;
  }
  
  .contact-form {
    margin-top: 40px;
  }
}

@media (max-width: 576px) {
  .section-header h1 {
    font-size: 2rem;
  }
  
  .contact-form {
    padding: 30px 20px;
  }
}
</style>